<!-- 电影详情页 -->
<script setup lang="ts">
import type { Comment } from '@/types/comment';
import type { MovieItem } from '@/types/movieItem';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { getMovieDetailItemAPI } from '@/services/movieItem'

import UserComment from "@/componets/UserComment.vue"


// 获取页面参数
const query = defineProps<{
    id: string
}>()



const MovieDetailItem = ref<MovieItem>()

let txt_content: string;

let tempContent = ref<string>('');
let isShowAllContent = ref<boolean>(false);

// 获取热映电影数据
const getMovieDetailItemData = async () => {
    const res = await getMovieDetailItemAPI(query.id)
    MovieDetailItem.value = res.result



}






// 页面加载
onLoad(async () => {

    await getMovieDetailItemData()



    txt_content = MovieDetailItem.value!.movieDesc;
    // 在加载时判断简介文字是否全部展示
    let txtCntIndex = txt_content.length

    if (txtCntIndex > 60) {
        isShowAllContent.value = true
        tempContent.value = txt_content.substr(0, 60) + "..."
    } else {
        isShowAllContent.value = false
        tempContent.value = txt_content
    }






})

// 切换简介的文字是展开还是收起为省略展示
function toggleDescription() {
    if (isShowAllContent.value) {
        isShowAllContent.value = false
        tempContent.value = txt_content
    } else {
        isShowAllContent.value = true
        tempContent.value = txt_content.substring(0, 85) + "..."
    }

}



/**跳转至视频播放页
 * @param id 视频id */
function goPdVideo(id: string) {
    console.log("跳转至视频播放页" + id);

    uni.navigateTo({
        url: '/pages/PdVideo/PdVideo?id=' + id
    });


}


</script>

<template>
    <view class="topShowContainer">
        <!-- 左侧图片 -->
        <view class="content_image">
            <image mode="scaleToFill" :src="MovieDetailItem?.imgUrl" />
        </view>

        <!-- 右侧 -->
        <view class="content_text">
            <text class="movieName">{{ MovieDetailItem?.name }}</text>
            <text class="movietype">{{ MovieDetailItem?.filmGenre }}</text>
            <text class="movieTime">{{ MovieDetailItem?.releaseDate }} {{ MovieDetailItem?.movieTime }}分钟</text>
            <text class="movieInq">"{{ MovieDetailItem?.classicSentence }}"</text>
            <view>
                <uni-rate :size="16" :max="10" :value="MovieDetailItem?.star" :readonly="true" allow-half />
            </view>

            <view class="WatchMovie">
                <view style="width: 50%;">
                    <button class="mini-btn" type="warn" size="mini">想看</button>
                </view>
                <view style="width: 50%;">
                    <button class="mini-btn" type="warn" size="mini">看过</button>
                </view>
            </view>

        </view>
    </view>


    <!-- 电影简介 -->
    <view class="intro">
        <!-- <text style="font-weight: bold; font-size: 26px; margin-bottom: 40rpx;">简介</text>
        <view>
            <text class="tempContent">{{ tempContent }}</text>
        </view> -->
        <uni-card title="简介">
            <text class="uni-body tempContent">{{ MovieDetailItem?.movieDesc }}</text>

            <!-- 右侧展开与收起 -->
            <view class=isShowBtnContainer>
                <text style="display: block; width: 100%; text-align: right;" v-if="isShowAllContent"
                    @click="toggleDescription">
                    展开
                </text>
                <text style="display: block; width: 100%; text-align: right;" v-else @click="toggleDescription">
                    收起
                </text>
            </view>
        </uni-card>


    </view>

    <!-- 演员 -->
    <view class="actor">
        <uni-section title="演员表" type="line">
            <!-- <uni-card title="演员"> -->
            <scroll-view class='actorScrollContainer' scroll-x>
                <view class='scrollitem' v-for="(item, index) in MovieDetailItem?.actors" :key="item.name">
                    <image class="scrollimage" :src="item.imgUrl">
                    </image>
                    <view class="recommandItemText">{{ item.name }}</view>
                </view>

            </scroll-view>

        </uni-section>
        <!-- </uni-card> -->
    </view>






    <!-- 视频 -->

    <view class="videoContainer">
        <uni-section title="视频" type="line">

            <scroll-view class='videoScrollContainer' scroll-x>



                <view class='scrollitem' @tap="goPdVideo(item.id)" v-for="(item, index) in MovieDetailItem?.videos"
                    :key="item.id">
                    <image class="scrollimage" :src="item.imgUrl">
                    </image>
                    <image class="videoIcon" src="@/static/video.png">
                    </image>
                    <view class="recommandItemText">{{ item.title }}</view>
                </view>

            </scroll-view>

        </uni-section>

    </view>


    <!--   评论 -->
    <!-- <uni-section style="margin-top: 30rpx;" title="观众热评" type="line">
        <uni-card v-for="item, index in CommentlItemList" :title="item.name" :extra="item.star + '分'"
            :thumbnail="item.iconUrl">
            <text class="uni-body">{{ item.comment }}</text>
        </uni-card>
    </uni-section> -->


    <UserComment :id="query.id"></UserComment>



    <view style="height: 200rpx; background-color: beige;">

    </view>

    <view class="bottom-view">
        <button type="warn">{{ MovieDetailItem?.price }}元起 特惠购票</button>
    </view>
</template>

<style lang="scss">
page {
    background: #F1F1F1;
}

.topShowContainer {
    height: 350rpx;
    display: flex;


    .content_image {
        width: 40%;
        overflow: hidden;
        height: 405rpx;

        image {
            margin-left: 30rpx;
            width: 270rpx;
            // max-height: 250px;
            height: 405rpx;

        }
    }


    .content_text {
        width: 50%;
        padding-left: 30rpx;

        text {
            line-height: 50rpx;
            display: block;
            color: #333;
        }

        .movieName {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

        .movietype {
            font-size: 16px
        }
    }


    .WatchMovie {
        margin-top: 20rpx;
        width: 100%;
        display: flex;
        justify-content: center;
    }


}


.intro {
    padding: 30rpx;
    margin-top: 30rpx;


    .tempContent {
        font-size: 16px;
        color: #333;
    }

}


.bottom-view {
    background-color: azure;
    width: 100%;
    height: 150rpx;
    position: fixed;
    bottom: 10rpx;
    text-align: center;
    padding: 10px 0;


}


// 演员滚动容器
.actorScrollContainer {
    width: 666rpx;
    height: 350rpx;
    white-space: nowrap;

    // 容器项
    .scrollitem {
        display: inline-block;
        // margin-left: 30rpx;
        height: 300rpx;
        text-align: center;
    }

    .scrollimage {
        width: 174rpx;
        height: 250rpx;
    }


    .recommandItemText {
        width: 270rpx;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }


}


.videoContainer {
    margin-top: 50rpx;
    margin-bottom: 50rpx;
}

// 视频滚动容器
.videoScrollContainer {
    width: 666rpx;
    height: 220rpx;
    white-space: nowrap;

    // 容器项
    .scrollitem {
        position: relative;
        display: inline-block;
        margin-left: 30rpx;
        height: 174rpx;
    }



    .scrollimage {
        width: 270rpx;
        height: 174rpx;
    }

    .recommandItemText {
        width: 270rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        bottom: 0rpx;
        color: white;
        font-size: 14px;
    }

    .videoIcon {
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        left: 50%;
        top: 50%;
        margin-left: -30rpx;
        margin-top: -30rpx;
        opacity: 0.8;
    }


}
</style>
